<template>
	<div class="cityDetail">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item :to="{ path: '/city/home'}">城市管理</el-breadcrumb-item>
			<el-breadcrumb-item>城市参数</el-breadcrumb-item>
			<el-breadcrumb-item>{{cityName}}</el-breadcrumb-item>
		</el-breadcrumb>
		<el-tabs :active-name="cityDetail" v-model="cityDetail" type="card" @tab-click="handleClick">
			<el-tab-pane label="覆盖范围" name="first">
				<region @message="getIsAdd"></region>
			</el-tab-pane>
			<el-tab-pane label="同城价" name="second">
				<city></city>				
			</el-tab-pane>
			<el-tab-pane label="调价区域" name="third">
				<priceregion :isUpdate="isUpdatePriceArea" @message="updated"></priceregion>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import region from "./city/region.vue"
	import city from "./city/city.vue"
	import priceregion from "./city/priceregion.vue"
	export default {
		name: "cityDetail",
		data() {
			return {
				cityDetail: "first",
				cityInfo: "",
				cityName: "",
				cityId: "",
				isUpdatePriceArea: false
			}
		},
		methods: {
			handleClick() {
			  console.log(this.cityDetail);
				sessionStorage.setItem("tabIdx", this.cityDetail);
			},
			getIsAdd(val){
				this.isUpdatePriceArea = true;
			},
			updated(val){
				this.isUpdatePriceArea = false;
			}
		},		
		components: {
			region,
			city,
			priceregion
		},
		created() {
			this.cityInfo = JSON.parse(sessionStorage.getItem("cityDetail"));
			this.cityName = this.cityInfo.name;
			this.cityId = this.cityInfo.id;
			this.cityDetail = sessionStorage.getItem("tabIdx") || "first";
		}
	}
</script>

<style>
	#map {
		width: 100%;
		height: 500px;
		border: 1px solid #969696;
		margin-top: 15px;
	}
	
	.icon-top {
		display: inline-block;
		width: 18px;
		height: 18px;
		background-image: url(../../../static/images/top.png);
		background-repeat: no-repeat;
		background-size: cover;
		vertical-align: middle;
		cursor: pointer;
	}
	
	.price-input {
		width: 50px !important;
	}
</style>